<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax获取接口列表</title>
</head>

<body>
    <!-- <div id="box">
        <h1>使用AJAX更改文本内容</h1>
    </div>
    <button id="but">点击</button> -->


    <table border="1">
        <thead>
            <tr>
                <th id="tit" colspan="2"></th>
            </tr>
        </thead>

        <tbody></tbody>

    </table>
</body>
<script>
    //     使用ajax获取接口列表 ： 

    // ​		要求将列表循环显示到表格当中

    // ​		接口地址： https://liu.zzgoodqc.cn/hello  GET方法请求



    // document.getElementById('but').onclick = function () {

    //     var xhttp = new XMLHttpRequest();
    //     xhttp.onreadystatechange = function () {
    //         if (this.readyState == 4 && this.status == 200) {
    //             document.getElementById('box').innerHTML = this.responseText;
    //             console.log(JSON.parse(this.responseText));
    //         }

    //     };
    //     xhttp.open('GET','https://liu.zzgoodqc.cn/hello',true);
    //     xhttp.send();

    // }




    window.onload = function () {
        var xhttp = new XMLHttpRequest();
        xhttp.open('GET', "https://liu.zzgoodqc.cn/hello", true)

        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                var dataobj = JSON.parse(xhttp.responseText)
                if (dataobj.code == 0) {
                    document.getElementById('tit').innerHTML = dataobj.msg

                    var str = ''
                    for (let i in dataobj.data) {
                        str += `<tr>
                                    <td>${+i + 1}</td>
                                    <td>${dataobj.data[i].title}</td>
                                </tr>`
                    }
                    document.getElementsByTagName('tbody')[0].innerHTML = str
                }
            }
        }
        xhttp.send()
    }



</script>

</html>